<template>
	<view class="body">
		<cu-custom bgColor="bg-maincolor" isBack="true">
			<block slot="content">职位详情</block>
		</cu-custom>

		<view class="top-tital">
			<view class="tital2">
				{{job_name}}
				<view class="rigth-text">已申请：{{count}}</view>
			</view>
			<view class="flex">
				<view class="text2">{{city}} | {{workage}} | {{qualifications}}</view>
				<view class="timeinfo" v-if="start_work_time!=null&&end_work_time!=null">工作时间：{{start_work_time}}--{{end_work_time}}</view>
			</view>
			<view style="display: flex;margin-top: 0rpx;font-size: 20rpx;">
				<view class='cu-tag radius sm bgcolor' v-for="(item,index) in tags" :key="index">{{item}}</view>
			</view>
			
		</view>
		<!-- 下方文字 -->
		<view class="detail">
			<view class="mangger">职位描述</view>
			<view class="mangger-text">
				{{describe}}
			</view>
		</view>
		<view class="qualify">
			<view class="mangger" style="margin-top: 40rpx;">任职资格</view>
			<view class="mangger-textone">
				{{requirements}}
			</view>
		</view>

		<view class="button foot">
			<block>
				<button class="but" :style="status===1?'background-color: #fe4c5f; color: #ffffff':''" @tap="stop()" v-if="status==1">停止招募</button>
				<button class="but" :style="this.status===-1?'background-color: #efefef; color: #333333':''" @tap="star()" v-if="status==-1">开始招募</button>
			</block>
			<button class="but" @tap="to_addPost(job_id)">编辑岗位</button>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				job_id: 0,
				job_name:'',
				city:'',
				workage:'',
				qualifications:'',
				describe:'',
				requirements:'',
				tags:['111','222'],
				status: 1,
				count:0,
				start_work_time:'',
				end_work_time:''
			}
		},
		onLoad(option) {
			appLogin((user_info)=>{
				console.log(option)
				this.job_id = option.job_id
				if(!this.job_id){
					uni.showToast({
						icon:"none",
						title:"访问错误"
					})
					return setTimeout(()=>{uni.navigateBack()},2000) 
				}
				this.postmore()
			})
		},
		showModal(e) {
			this.postmore()
			
		},
		methods: {
			star(){
				this.status = 1
				httpPost({
					url:'/api/company/job_status',
					data:{
						job_id:this.job_id,
						status:this.status
					}
				}).then((res) => {
					console.log(res.result.status)
				})
			},
			stop(){
				this.status = -1
				httpPost({
					url:'/api/company/job_status',
					data:{
						job_id:this.job_id,
						status:this.status
					}
				}).then((res) => {
					console.log(res.result.status)
				})
			},
			to_addPost(job_id){
				console.log(job_id)
				uni.redirectTo({
					url:'add_post?job_id='+job_id
				})
			},
			postmore(){
				httpGet({
					url:'/api/company/job_info',
					data:{job_id:this.job_id}
				}).then((res) => {
					console.log(res)
					this.job_name = res.result.job_name
					this.city = res.result.city
					this.workage = res.result.workage
					this.qualifications = res.result.qualifications
					this.tags = res.result.tags.splice(',')
					this.describe = res.result.describe
					this.requirements = res.result.requirements
					this.status = res.result.status
					this.start_work_time = res.result.start_work_time
					this.end_work_time = res.result.end_work_time
				})
			}
		}
	}
</script>

<style>
	.body {
		background-color: rgb(255, 255, 255);
		margin-bottom: 200rpx;
	}

	.tital2 {
		font-weight: 550;
		font-size: 35rpx;
		display: flex;
		color: rgb(51, 51, 51);
	}

	.text2 {
		/* font-weight: bold; */
		font-size: 20rpx;
		color: gray;
		margin-top: 10rpx;
	}

	.top-tital {
		/* display: flex; */
		margin-top: 90rpx;
		margin-left: 30rpx;
		color: rgb(51, 51, 51);
	}

	.bgcolor {
		background-color: rgb(244, 244, 244);
		margin-top: 20rpx;
		font-size: 3rpx;

	}

	.cu-tag.sm {
		height: 36rpx;
		margin-right: 15rpx;
	}

	.bgcolor {
		background-color: rgba(244, 244, 244);
		text-align: center;
		line-height: 36rpx;
	}

	.rigth-text {
		color: rgb(153, 153, 153);
		right: 34rpx;
		margin-top: 118rpx;
		font-size: 25rpx;
		font-weight: bold;
		position: absolute;
		top: 145rpx;
	}

	.right-icu {

		position: absolute;
		line-height: 155rpx;
		right: 60rpx;

	}

	.text-ava {
		margin-top: 30rpx;
		background-color: rgb(11, 162, 154);
		font-size: 20rpx;
		font-weight: 900rpx;
	}

	.detail {
		width: 690rpx;
		margin: auto;
		margin-top: 40rpx;
		line-height: 90rpx;
		border-top: rgba(179, 179, 179, 0.3) 1rpx solid;
	}

	.mangger {
		font-size: 36rpx;
		font-weight: 800;
		color: rgb(51, 51, 51);
	}

	.mangger-text {
		font-size: 30rpx;
		line-height: 2.5em;
		color: rgb(51, 51, 51);
		white-space: pre-wrap;
		margin-bottom: -50rpx;
	}
	.mangger-textone {
		font-size: 30rpx;
		line-height: 2.5em;
		color: rgb(51, 51, 51);
		white-space: pre-wrap;
		padding-bottom: 140rpx;
	}
	.qualify {
		width: 690rpx;
		margin: auto;
		border-top: rgba(179, 179, 179, 0.3) 1rpx solid;
		margin-top: 40rpx;
	}

	.but {
		width: 350rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 20rpx;
		line-height: 80rpx;
		background-color: #0081FF;
		border-radius: 45rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.button {
		display: flex;
		margin: auto;
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		height: 120rpx;
		border-top: rgba(179, 179, 179, 0.3) 1rpx solid;
		background-color: #FFFFFF;
	}
	
	.timeinfo{
		margin-left: 20rpx;
		font-size: 20rpx;
		color: gray;
		margin-top: 10rpx;
	}
</style>
